<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String billNum = request.getParameter("billNum");
    String reimbursementPrice = request.getParameter("reimbursementPrice");
    String payAllPrice = request.getParameter("payAllPrice");
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>报销单详情</title>
    <script src="<%=basePath%>common/jquery/jquery-1.9.0.js"></script>
    <script src="<%=basePath%>common/layui/layui.all.js"></script>
    <script src="<%=basePath%>common/common.js"></script>
    <link rel="stylesheet" href="<%=basePath%>common/layui/css/layui.css">
</head>
<body>
<style>
    #showPersonInfo th, tr {
        border: 1px solid black;
    }

    #info span {
        color: red;
    }
</style>
<%--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend></legend>
</fieldset>--%>


<table class="layui-table" id="showPersonInfo" lay-filter="test3"></table>
<%--<button type="button" class="layui-btn layui-btn-normal" style="float: right;" onclick="saveBillDetail()">保存</button>--%>
<blockquote class="layui-elem-quote">报销单实际付款总金额：<%=payAllPrice%>元</blockquote>
<blockquote class="layui-elem-quote">报销单实际应发放总金额：<%=reimbursementPrice%>元</blockquote>
<script type="text/html" id="barDemo" class="demoTable">
   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="save">保存</a>
</script>
<script>
    var billNum = '<%=billNum%>';
    var reimbursementPrice = '<%=reimbursementPrice%>';
    layui.use(['form', 'layedit', 'laydate', 'table'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate, laytable = layui.table;
        laytable.render({
            elem: '#showPersonInfo',
            url: webPath + '/bill/queryBillDetail?billNum='+billNum,
            cellMinWidth: 80,  //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            totalRow: true,
            cols: [[
                {type: 'numbers', title: '序号' , totalRowText: '合计'},
                {field: 'personName', title: '报销人'},
                {field: 'billPrice', title: '付款金额(元)', edit: 'text'},//, totalRow: true
                {field: 'personPayPrice', title: '发放金额(元)', edit: 'text', style:'background-color: #009688; color: #fff;',totalRow: true},
                {field: 'quitTime', title: '下班考勤时间(格式00:00)', edit: 'text'},
                {field: 'updateTime', title: '更新时间'}
               /* , {
                    fixed: 'right',width: 162,align: 'center',toolbar: '#barDemo',
                    title: '操作',templet: '#buttons',unresize: true
                }*/
            ]]
        });

        //监听工具条
        laytable.on('tool(test3)', function (obj) {
            var data = obj.data;
            if (obj.event === 'save') {
               saveBillDetail(data.detailNum,data.quitTime,data.billPrice);
                layer.msg('修改成功');
                table.reload('showPersonInfo', {
                     url: webPath + '/bill/queryBillDetail'
                    ,where: {"billNum":billNum} //设定异步数据接口的额外参数
                    //,height: 300
                });
            }
        });
        //监听单元格编辑
        laytable.on('edit(test3)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
           // layer.msg('[ID: '+ data.detailNum +'] ' + field + ' 字段更改为：'+ value);
            if(field=="quitTime"){
                saveBillDetail(data.detailNum,value,data.billPrice,data.personPayPrice);
            }
            if(field=="billPrice"){
                saveBillDetail(data.detailNum,data.quitTime,value,data.personPayPrice);
            }
            if(field=="personPayPrice"){
                saveBillDetail(data.detailNum,data.quitTime,data.billPrice,value);
            }
            layer.msg('修改成功');
            setTimeout(function () {
                laytable.reload('showPersonInfo', {});
            }, 500);
        });
    });


    //保存
    function saveBillDetail(detailNum,quitTime,billPrice,personPayPrice) {
        $.ajax({
            url: webPath + "/bill/updateBillDetail",
            type: "post",
            //.serialize() 当提交多条表单数据时，我们可以采用当表单进行序列化的方式简化原有的操作
            data: {"detailNum": detailNum, "quitTime": quitTime, "billPrice": billPrice, "personPayPrice": personPayPrice},
            dataType: "json",
            success: function (result) {
                if (result == "success") {
                    $("#result").html("保存成功");
                    location.reload();
                } else {
                    $("#result").html("保存失败");
                }
            }
        });
    }

    //删除
    function deleteBillDetail(detailNum) {
        $.ajax({
            url: webPath + "/bill/deleteBillDetail",
            type: "post",
            //.serialize() 当提交多条表单数据时，我们可以采用当表单进行序列化的方式简化原有的操作
            data: {"detailNum": detailNum},
            dataType: "json",
            success: function (result) {
            }
        });
    }

    function addBill() {
        window.location.href = webPath + "/jsp/bill_add.jsp";
    }

    function toBillList() {
        window.location.href = webPath + "/jsp/index.jsp";
    }
</script>
</body>
</html>
